<template>
  <div>
    <h1 id="myTitle">{{myTitle}}</h1>
    <div class="myClass">
      <button id="myButton01" @click="changeTitle">Change Title</button>
      <button id="myButton02" @click="changeXSize">Change X Size</button>
    </div>
    <div class="container">
      <!-- 游戏面板（棋盘） -->
      <div id="bord" class="game-board x" :style="styleObj">
        <div class="row">
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
        <div class="row">
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
        <div class="row">
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
      </div>

      <!-- 游戏获胜信息面板 -->
      <div id="message" class="game-message">
        <p id="winner">X 赢了！</p>
        <button id="restart">重新开始</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import '../styles/index.css'

import { MyChessXSize } from '../interface/MyChessInterface'

const myTitle = ref<string>('Tic Tac Toe')
const myTitleChange = ref<boolean>(false)
const myFontSizeChange = ref<boolean>(false)
const styleObj = reactive<MyChessXSize>({
  fontSize: '80px'
})

const changeTitle = (): void => {
  myTitleChange.value = !myTitleChange.value
  if (myTitleChange.value) {
    myTitle.value = '物联网1904-田雨龙'
  } else {
    myTitle.value = 'Tic Tac Toe'
  }
}

const changeXSize = (): void => {
  myFontSizeChange.value = !myFontSizeChange.value
  if (myFontSizeChange.value) {
    styleObj.fontSize = '40px'
  } else {
    styleObj.fontSize = '160px'
  }
}
</script>

<style scoped>

</style>
